
       

 

/* 
   需求：1、根据商品的id号获取商品详情接口
         2、id号作为参数拼接到地址后面，id
         
*/
let product
/* 获取id号 */
function getId() {
  let href = location.href //获取地址
  let index = href.substring(href.indexOf('?') + 1) //找到字符对应的索引号
  let id = (index.split('='))[1]
  return id
}


/**
 * ajax
 */
 function loadProduct() {
    let id = getId()
    $.ajax({
        method: 'get',
        url: 'http://api.yuguoxy.com/api/shop/find',
        data: {
            id,
        },
        success: function (data) {
          if (data.resultCode == 1) {
            let product = data.resultInfo
            console.log(product);
            showProduct(product)
            text(product)
            blockShow()
            imgCheck(product)
            // console.log(product);
          }
        },
      })

  }

/* 动态渲染 */

function showProduct(product) {
  /* 商品图片 */
  let bigImg = product.list.map(item => {
    return ` <!-- 大图 -->
            <li ><img src="${item}"></li>
            <div class="block"></div>
           `
  }).join('')
  let smallImg =
    ` <li class="on" data-index="0"><img src="${product.list[0]}" alt=""></li>
            <li data-index="1"><img src="${product.list[1]}" alt=""></li>
            <li data-index="2"><img src="${product.list[2]}" alt=""></li>
            <li data-index="3"><img src="${product.list[3]}" alt=""></li>
            <li data-index="4"><img src="${product.list[4]}" alt=""></li>
           `
  let markImg = product.list.map(item => {
    return `<img src="${item}" alt="">`
  }).join('')

  /* 商品信息 */
  let productMessage = `
                      <h4>${product.shop}</h4>
                      <div class="price">
                        <span>价格</span>
                        <p>
                          <span>￥${product.price} </span>
                          <span>原价：￥${product.oldprice} </span>
                        </p>
                      </div>
                      <!-- 运费 -->
                      <div class="freight">
                        <span>运费</span>
                        <span>快递：0.00</span>
                      </div>
                      <!-- 月销量 -->
                      <div class="sales-volume">
                        <p>
                          月销量 <span>${Math.floor(Math.random() * (10000 - 1000) + 1000)}</span>
                        </p>
                        <p>|</p>
                        <p>送熊猫积分 <span>${Math.ceil((product.price)/10)}</span></p>
                      </div>
                      <!-- 加入购物车 -->
                      <div class="add-cart">
                        <button data-id=${product.id}>加入购物车</button>
                      </div>
                      `
  let details = product.list.map(item => {
    return `<img src="${item}" alt="">`
  }).join('')
  // addCart()
  const big = document.querySelector('.productImg  .big-img')
  const small = document.querySelector('.productImg  .small-img')
  const productText = document.querySelector('.productText')
  const detailsEle = document.querySelector('.details')
  const rightEle = document.querySelector('.productImg .right')
  big.innerHTML = bigImg
  small.innerHTML = smallImg
  productText.innerHTML = productMessage
  detailsEle.innerHTML = details
  rightEle.innerHTML = markImg
}
/* 图片切换 */
/* 区块和放大镜显示隐藏 */
function blockShow() {
  const ulELe = document.querySelector('.big-img')
  const divEle = document.querySelector('.block')
  const rightEle = document.querySelector('.productImg>.right')
  ulELe.addEventListener('mousemove', function (e) {
    let mask = document.querySelector('.big-img>.block') //遮罩层
    let glassBox = document.querySelector('.right') //放大镜区域
    let bigPic = document.querySelector('.right>img') //背景图片
    let w = glassBox.clientWidth * ulELe.clientWidth / mask.clientWidth
    let h = glassBox.clientHeight * ulELe.clientHeight / mask.clientHeight
    bigPic.style.width = w + 'px'
    bigPic.style.height = h + 'px'
    e = e || window.event //事件对象
    let x = e.offsetX - divEle.clientWidth / 2
    let y = e.offsetY - divEle.clientHeight / 2
    if (x < 0) {
      x = 0
    }
    if (x > ulELe.clientWidth - divEle.clientWidth) {
      x = ulELe.clientWidth - divEle.clientWidth
    }
    if (y < 0) {
      y = 0
    }
    if (y > ulELe.clientHeight - divEle.clientHeight) {
      y = ulELe.clientHeight - divEle.clientHeight
    }
    divEle.style.left = x + 'px'
    divEle.style.top = y + 'px'
    let moveX = (x * glassBox.clientWidth) / mask.clientWidth
    let moveY = (y * glassBox.clientHeight) / mask.clientHeight
    bigPic.style.left = `${-moveX}px`
    bigPic.style.top = `${-moveY}px`
  })
  ulELe.addEventListener('mouseover', function () {
    divEle.style.display = 'block'
    rightEle.style.display = 'block'
  })
  ulELe.addEventListener('mouseout', function () {
    divEle.style.display = 'none'
    rightEle.style.display = 'none'
  })
}
/* 选项切换 */
function imgCheck(product) {
  $('.small-img li').click(function () {
    // 清除所有小图样式
    $('.small-img li').removeClass('on')
    $(this).addClass('on')
    //根据属性名获取属性值
    let index = $(this).attr('data-index')
    $('.big-img img').attr('src', `${product.list[index]}`)
    $('.right img').attr('src', `${product.list[index]}`)
  })
}
/* 商品推荐 */
let pageNo = 1 //页号
let allStr = '' //所有商品数据
 function loadProductT(pageNo) {
    $.ajax({
      method: 'get',
      url: 'http://api.yuguoxy.com/api/shop/list',
      data: {
        pageSize: 2,
        pageNo,
      },
      success: function (data) {
        if (data.resultCode == 1) {
          let list = data.resultInfo.list
          recommend(list)
        }
      },
    })
  
  }

function recommend(list) {
  let product = list.map(item => {
    return `
            <div class="product-picture">
              <img
                src="${item.picture}"
                alt="${item.shop}">
              <div>￥${item.price}</div>
            </div>
           
           `
  }).join('')
  const productList = document.querySelector('.product-list')
  productList.innerHTML = product
}
/* d点击加载更多 */
/* 点击按钮显示内容 */
function showMore() {
  const btnEle = document.querySelector('fieldset>.more')
  btnEle.addEventListener('click', function () {
    loadProductT(++pageNo)
  })
}
/* 点击跳转 */
function jumpCart() {
  location.href = '/html/cart.html'
}
/* 点击加入购物车 */
function text(product){
$('button').on('click',function(){
    /* localStorage中获取商品列表 */
  let productList = JSON.parse(localStorage.getItem('XMYX-CART-LIST')) || []
  let user = JSON.parse(localStorage.getItem('user-Message'))
  //在添加数据之前判断购物车中是否有此商品存在，如果存在数量加1，如果不存在则添加
  let oldProduct = productList.find(item => item.id == product.id)
  if (user) {
    if (oldProduct) {
      oldProduct.num++
    } else {
      /* 创建数组 */
      let cartProdcut = {
        id: product.id,
        url: product.picture, //商品图片
        name: product.shop, //商品名称
        price: product.price, //价格
        num: 1, //商品数量
        state: false, //状态
      }
      productList.push(cartProdcut)
    }
    //将购车列表内容存储在localStorage中
    localStorage.setItem('XMYX-CART-LIST', JSON.stringify(productList))
    alert('添加成功，去购物车看看吧！')
  } else {
    alert('请先登录哦！')
    location.href = '/html/login.html'
  }
})

}


loadProduct()
loadProductT()
showMore()




       
